﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Table Style</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /*css_begin*/
        label {
            display:inline-block;
            width: 120px;
        }
    /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            initSpread(spread);
        });

        function initSpread(spread) {
            var spreadNS = GcSpread.Sheets;

            var sheet = spread.getSheet(0);
            sheet.bind(spreadNS.Events.SelectionChanged, tableName);
            var table = sheet.addTable("table1", 1, 1, 4, 4, spreadNS.TableStyles.light1());

            function tableName() {
                var sheet = spread.getActiveSheet();
                var table = sheet.findTable(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
                var name = "";
                if (table && table.name) {
                    name = table.name();
                }
                $("#tableName").text(name);
            }

            $("#showHeader").change(function () {
                var sheet = spread.getActiveSheet();
                var table = sheet.findTable(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
                if (table) {
                    table.showHeader($("#showHeader").prop("checked"));
                    sheet.invalidateLayout();
                    sheet.repaint();
                }
            });
            $("#showFooter").change(function () {
                var sheet = spread.getActiveSheet();
                var table = sheet.findTable(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
                if (table) {
                    table.showFooter($("#showFooter").prop("checked"));
                    sheet.invalidateLayout();
                    sheet.repaint();
                }
            });
            $("#highlightFirstColumn").change(function () {
                var sheet = spread.getActiveSheet();
                var table = sheet.findTable(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
                if (table) {
                    table.highlightFirstColumn($("#highlightFirstColumn").prop("checked"));
                    sheet.invalidateLayout();
                    sheet.repaint();
                }
            });
            $("#highlightLastColumn").change(function () {
                var sheet = spread.getActiveSheet();
                var table = sheet.findTable(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
                if (table) {
                    table.highlightLastColumn($("#highlightLastColumn").prop("checked"));
                    sheet.invalidateLayout();
                    sheet.repaint();
                }
            });
            $("#bandRows").change(function () {
                var sheet = spread.getActiveSheet();
                var table = sheet.findTable(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
                if (table) {
                    table.bandRows($("#bandRows").prop("checked"));
                    sheet.invalidateLayout();
                    sheet.repaint();
                }
            });
            $("#bandColumns").change(function () {
                var sheet = spread.getActiveSheet();
                var table = sheet.findTable(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
                if (table) {
                    table.bandColumns($("#bandColumns").prop("checked"));
                    sheet.invalidateLayout();
                    sheet.repaint();
                }
            });
            //change table style
            $("#tableStyles").change(function () {
                var sheet = spread.getActiveSheet();
                var table = sheet.findTable(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
                if (table) {
                    var style = getTableStyle();
                    if (style) {
                        table.style(style);
                        sheet.repaint();
                    }
                }
            });

            function getTableStyle() {
                var styleName = $("#tableStyles>option:selected").text();
                if (styleName) {
                    return spreadNS.TableStyles[styleName.toLowerCase()]();
                }
                return null;
            }
        }
        /*code_end*/
    </script>

</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height:360px;border: 1px solid gray;"></div>
    <div class="demo-options">
        <div class="option-row">
            <input type="checkbox" id="showHeader"/>
            <label for="showHeader">Header Row</label>
            <input type="checkbox" id="highlightFirstColumn" />
            <label for="highlightFirstColumn">First Column</label>
        </div>
        <div class="option-row">
            <input type="checkbox" id="showFooter"/>
            <label for="showFooter">Total Row</label>
            <input type="checkbox" id="highlightLastColumn" />
            <label for="highlightLastColumn">Last Column</label>
        </div>
        <div class="option-row">
            <input type="checkbox" id="bandRows"/>
            <label for="bandRows">Banded Row</label>
            <input type="checkbox" id="bandColumns" />
            <label for="bandColumns">Banded Column</label>
        </div>
        <div class="option-row">
            <label for="tableStyles" style="width:auto;">Build-in Styles:</label>
            <select id="tableStyles">
                <option value="0">Light1</option>
                <option value="1">Light2</option>
                <option value="2">Light3</option>
                <option value="3">Light4</option>
                <option value="4">Light5</option>
                <option value="5">Light6</option>
                <option value="6">Light7</option>
                <option value="7">Light8</option>
                <option value="8">Light9</option>
                <option value="9">Light10</option>
                <option value="10">Light11</option>
                <option value="11">Light12</option>
                <option value="12">Light13</option>
                <option value="13">Light14</option>
                <option value="14">Light15</option>
                <option value="15">Light16</option>
                <option value="16">Light17</option>
                <option value="17">Light18</option>
                <option value="18">Light19</option>
                <option value="19">Light20</option>
                <option value="20">Light21</option>

                <option value="21">Medium1</option>
                <option value="22" selected='selected'>Medium2</option>
                <option value="23">Medium3</option>
                <option value="24">Medium4</option>
                <option value="25">Medium5</option>
                <option value="26">Medium6</option>
                <option value="27">Medium7</option>
                <option value="28">Medium8</option>
                <option value="29">Medium9</option>
                <option value="30">Medium10</option>
                <option value="31">Medium11</option>
                <option value="32">Medium12</option>
                <option value="33">Medium13</option>
                <option value="34">Medium14</option>
                <option value="35">Medium15</option>
                <option value="36">Medium16</option>
                <option value="37">Medium17</option>
                <option value="38">Medium18</option>
                <option value="39">Medium19</option>
                <option value="40">Medium20</option>
                <option value="41">Medium21</option>
                <option value="42">Medium22</option>
                <option value="43">Medium23</option>
                <option value="44">Medium24</option>
                <option value="45">Medium25</option>
                <option value="46">Medium26</option>
                <option value="47">Medium27</option>
                <option value="48">Medium28</option>

                <option value="49">Dark1</option>
                <option value="50">Dark2</option>
                <option value="51">Dark3</option>
                <option value="52">Dark4</option>
                <option value="53">Dark5</option>
                <option value="54">Dark6</option>
                <option value="55">Dark7</option>
                <option value="56">Dark8</option>
                <option value="57">Dark9</option>
                <option value="58">Dark10</option>
                <option value="59">Dark11</option>
            </select>
        </div>
    </div>
</div>
</body>
</html>
